<template>
  <div>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>美多商城-首页</title>
    </head>
    <body>
    <div id="app" v-cloak>
      <div class="header_con">
        <div class="header">
          <div class="welcome fl">欢迎来到美多商城!</div>
          <div class="fr">
            <div class="login_info fl">
              欢迎您：<em>张 山</em>
              <a href="javascript:;" class="quit">退出</a>
            </div>
            <div class="login_btn fl">
              <a href="http://localhost:8080/#/login">登录</a>
              <span>|</span>
              <a href="http://localhost:8080/#/reg">注册</a>
            </div>
            <div class="user_link fl">
              <span>|</span>
              <a href="user_center_info.html">用户中心</a>
              <span>|</span>
              <a href="cart.html">我的购物车</a>
              <span>|</span>
              <a href="user_center_order.html">我的订单</a>
            </div>
          </div>
        </div>
      </div>

      <div class="search_bar clearfix">
        <a href="../../../index.html" class="logo fl"><img src="../../../static/images/logo.png"></a>
        <div class="search_wrap fl">
          <form method="get" action="/search/" class="search_con">
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
            <input type="submit" class="input_btn fr" name="" value="搜索">
          </form>
          <ul class="search_suggest fl">
            <li><a href="#">索尼微单</a></li>
            <li><a href="#">优惠15元</a></li>
            <li><a href="#">美妆个护</a></li>
            <li><a href="#">买2免1</a></li>
          </ul>
        </div>

        <div class="guest_cart fr">
          <a href="/carts/" class="cart_name fl">我的购物车</a>
          <div class="goods_count fl" id="show_count">[[ cart_total_count ]]</div>
          <ul class="cart_goods_show">
            <li v-for="cart in carts">
              <img :src="cart.default_image_url" alt="商品图片">
              <h4>[[ cart.name ]]</h4>
              <div>[[ cart.count ]]</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="navbar_con">
        <div class="navbar">
          <h1 class="fl">商品分类</h1>
          <ul class="navlist fl">
            <li><a href="">首页</a></li>
            <li class="interval">|</li>
            <li><a href="">真划算</a></li>
            <li class="interval">|</li>
            <li><a href="">抽奖</a></li>
          </ul>
        </div>
      </div>

      <div class="pos_center_con clearfix">
        <ul class="slide">
          <li><a href="#"><img src="../../../static/images/slide01.jpg" alt="幻灯片01"></a></li>
          <!--        <li><a href="#"><img src="@static/images/slide02.jpg" alt="幻灯片02"></a></li>-->
          <!--        <li><a href="#"><img src="@static/images/slide03.jpg" alt="幻灯片03"></a></li>-->
          <!--        <li><a href="#"><img src="@static/images/slide04.jpg" alt="幻灯片04"></a></li>-->
        </ul>
        <div class="prev"></div>
        <div class="next"></div>
        <ul class="points">
        </ul>
        <ul class="sub_menu">
          <li v-for="i in crealist">
            <div class="level1" >
              <a href="http://shouji.jd.com/">{{ i.name }}</a>
            </div>
            <div class="level2">
              <div class="list_group" v-for="j in i.subs">
                <div class="group_name fl" >{{ j.name}} &gt;</div>
                <div class="group_detail fl" v-for="k in j.subs">
                  <a href="list.html">{{ k.name }}</a>
                </div>
              </div>
            </div>
          </li>
        </ul>

        <div class="news">
          <div class="news_title">
            <h3>快讯</h3>
            <a href="#">更多 &gt;</a>
          </div>
          <ul class="news_list">
            <li><a href="#">i7顽石低至4199元</a></li>
            <li><a href="#">奥克斯专场 正1匹空调1313元抢</a></li>
            <li><a href="#">荣耀9青春版 高配 领券立减220元</a></li>
            <li><a href="#">美多探索公益新模式</a></li>
            <li><a href="#">i7顽石低至4199元</a></li>
            <li><a href="#">正1匹空调1313元抢</a></li>
            <li><a href="#">奥克斯专场 正1匹空调1313元抢</a></li>
          </ul>
          <a href="#" class="advs"><img src="../../../static/images/adv01.jpg"></a>
        </div>
      </div>

      <div class="list_model" v-for="i in categoods">
        <div class="list_title clearfix">
          <h3 class="fl" id="model01">{{i.name}}</h3>
          <div class="subtitle fr">
            <!--            <a href="javascript:;" @mouseenter="f1_tab=1" :class="f1_tab===1?'active':''">时尚新品</a>-->
            <!--            <a href="javascript:;" @mouseenter="f1_tab=2" :class="f1_tab===2?'active':''">畅想低价</a>-->
            <!--            <a href="javascript:;" @mouseenter="f1_tab=3" :class="f1_tab===3?'active':''">手机配件</a>-->
            <!--            <button @click="get_crat(crea,i.id)">时尚新品</button>-->
            <button @click="get_crat('price',i.id)">低价</button>
            <button @click="get_crat('sales',i.id)">销量</button>
          </div>
        </div>
        <div class="goods_con clearfix">
          <div class="goods_banner fl">
            <img :src="'http://127.0.0.1:8000'+i.pic">
            <div class="channel">
              <a href="#" v-for="j in i.two">{{j.name}}</a>

            </div>
            <div class="key_words">
              <a href="#" v-for="c in i.three">{{c.name}}</a>

            </div>
          </div>
          <div class="goods_list_con">
            <ul class="goods_list fl" >
              <li v-for="k in i.goods">
                <a href="#" class="goods_pic"><img :src="'http://127.0.0.1:8000'+k.pic"></a>
                <h4><router-link :to="{path:'detail',query:{'id':k.id}}">{{k.name}}</router-link></h4>
                <div class="price">￥{{k.price}}</div>
              </li>
            </ul>

          </div>
        </div>
      </div>


      <div class="footer">
        <div class="foot_link">
          <a href="#">关于我们</a>
          <span>|</span>
          <a href="#">联系我们</a>
          <span>|</span>
          <a href="#">招聘人才</a>
          <span>|</span>
          <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888 京ICP备*******8号</p>
      </div>
    </div>

    </body>
    </html>
  </div>
</template>

<script>
export default {
  name: "shouye",
  data() {
    return {
      crealist: [],
      f1_tab:'',
      carts:'',
      categoods:[]
    }
  },
  methods: {
    get_crat(sorted,topid) {
      this.$axios.get('users/Home/?sorted='+sorted + '&topid='+topid)
        .then(res => {
          this.crealist = res.data.catelist
          this.categoods = res.data.categoods
        })
    },
  },
  mounted() {
    this.get_crat('','')
  }
}
</script>

<style scoped>

</style>
